<template>
  <div class="app-container">

    <!-- 列表 -->
    <el-table
        :data="deptList"
        style="width: 100%;margin-bottom: 20px;margin-top: 10px;"
        row-key="id"
        border
        :default-expand-all="true"
        :tree-props="{children: 'children'}">

        <!-- 名称字段 -->
        <el-table-column label="名称" prop="name" width="160"/>
        <!-- 部门负责人字段 -->
        <el-table-column label="部门负责人" prop="leader"/>
        <!-- 部门电话字段 -->
        <el-table-column label="部门电话" prop="phone"/>
        <!-- 状态字段 -->
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status === 1"
                @change="updateStatus(scope.row)"
                active-color="#13ce66"
                inactive-color="#dcdfe6">
            </el-switch>
          </template>
        </el-table-column>
        <!-- 创建时间字段 -->
        <el-table-column label="创建时间" prop="createTime"/>
        <!-- 操作字段 -->
        <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
                <el-button type="success" icon="el-icon-plus" size="mini" @click="add(scope.row)" title="添加" :disabled="scope.row.children.length === 0"/>
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)" title="修改"/>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除" :disabled="scope.row.children.length > 0"/>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加和修改的弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="40%">
        <el-form ref="deptForm" :model="deptForm" label-width="150px" size="small" style="padding-right: 40px;">

            <el-form-item label="上级部门">
                <el-input v-model="deptForm.parentName" :disabled="true"/>
            </el-form-item>

            <el-form-item label="名称">
                <el-input  v-model="deptForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>

            <el-form-item label="部门负责人">
                <el-input  v-model="deptForm.leader" placeholder="请输入部门负责人"></el-input>
            </el-form-item>

            <el-form-item label="联系电话">
                <el-input  v-model="deptForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input-number v-model="deptForm.sortValue" controls-position="right" :min="0" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click= saveOrUpdate() :disabled="saveBtnDisabled">提 交</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import dept_api from '@/api/system/dept'
const defaultForm = {
        id: '',
        parentId: '',
        treePath: '',
        name: '',
        leader: '',
        phone: '',
        sortValue: 1,
        status: 1
    }

export default {
data(){
    return{
    deptList:[],                //表格数据
    dialogFormVisible: false, //弹出框状态
    deptForm: defaultForm,       //弹出框表单
    dialogTitle: '',    //弹出框标题
    parentDept: {}, //父节点数据
    saveBtnDisabled: false
    }
},

created(){
    this.showTreeList()
},

methods:{

    //数据展示
    showTreeList(){
        dept_api.shouList().then(res =>{
            this.deptList = res.data
        })
    },

    //添加按钮
    add(row){
        this.sysMenu = Object.assign({}, defaultForm)
        this.deptForm.treePath = row.treePath
        this.deptForm.parentId = row.id
        this.deptForm.parentName = row.name
        this.dialogTitle = '添加下级节点'
        this.dialogFormVisible = true

    },

     //编辑按钮
     edit(row){
      this.dialogFormVisible = true
      dept_api.edit(row.id).then(res =>{
        this.deptForm = res.data
      })
    },

    //提交表单
    saveOrUpdate() {
    this.$refs.deptForm.validate(valid => {
        if (valid) {
          this.saveBtnDisabled = true // 防止表单重复提交
          if (!this.deptForm.id) {
            this.save()
          } else {
            this.update()
          }
        }
      })
    },

    //提交新增表单
    save(){
      dept_api.addDept(this.deptForm).then(res =>{
        this.$message.success(res.message)
        this.dialogFormVisible = false
        this.saveBtnDisabled = false // 防止表单重复提交
        this.showTreeList()
      })
    },

    //提交修改表单
    update(){
      dept_api.updateDept(this.deptForm).then(res =>{
        this.$message.success(res.message)
        this.dialogFormVisible = false
        this.saveBtnDisabled = false // 防止表单重复提交
        this.showTreeList()
      })
    },

    //删除方法
    removeDataById(id){
        this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dept_api.deleteDept(id).then(res =>{
          this.$message({
            type: 'success',
            message: res.message
          });
          this.showTreeList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      })
    },

    //改变状态
    updateStatus(row){
    const params = {
      id : row.id,
      status : row.status===0 ? 1 : 0
    }
    dept_api.updateDept(params).then(res => {
      this.$message.success("状态修改成功!")
      this.showTreeList()
    })
    }

}
}
</script>

<style>

</style>
